<template>
    <div class="container">
        <van-nav-bar
            :title=title
            :left-text=leftText
            :left-arrow=leftArrow
            @click-left="onBarClickLeft"
            :right-text=userName
            @click-right="onBarClickRight"
        />
        <van-search
            v-model="keyword"
            shape="round"
            background="#42bd56"
            placeholder="请输入搜索关键词"
            @focus="onFoucs"
        />
    </div>
</template>

<script>
import { useStore } from "vuex"
import { useRouter } from "vue-router"
import { ref } from "@vue/reactivity"

import { NavBar } from "vant/es/nav-bar"
import "vant/es/nav-bar/style"

import { Search } from "vant/es/search"
import "vant/es/search/style"

export default {
   props:{
      title:{
          type: String
      },
      leftArrow:{
          type: Boolean,
          default: false
      }
   },
   components:{
      [NavBar.name]: NavBar,
      [Search.name]: Search,
   },
   emits: [
       'onBarClickLeft'
   ],
   setup(props, context) {
        const store = useStore()
        const router = useRouter()

        const userName = ref('')
        const keyword = ref('')
        const leftText = ref('')
        leftText.value = props.leftArrow ? '返回' : ''

        //判断用户是否已经登录
        if(store.state.userInfo.userName){
            userName.value = store.state.userInfo.userName
        } else {
            userName.value = "登录"
        }
        //给父组件发射事件
        const onBarClickLeft = () => {
            context.emit("onBarClickLeft", {a:'b',b:'b'})
        }

        const onBarClickRight = () => {
             router.push('/login')
        }

        function onFoucs() {
      
         }
    
        return {
            userName,
            keyword,
            leftText,
            onBarClickLeft,
            onBarClickRight,
            onFoucs
        }
    },
}
</script>

<style  scoped>
.container{
    
}
</style>